<template>
  <div class="comtainer">
    <el-dialog :title="ids ? '编辑': '创建'" :close-on-click-modal="false" :visible.sync="visible"
               class="consignProd-add-upd" width="40%" @close="closeDialog">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" label-position="left" label-width="140px"
               style="width:620px; margin-left:50px;  ">
        <!-- 选择商品 -->
        <el-form-item style="margin-bottom:25px">
          <el-button plain @click="select()">选择商品</el-button>
        </el-form-item>
        <el-form-item label="系列名称：" prop="seriesName">
          <el-input
            v-model="dataForm.seriesName"
            type="text"
            placeholder="请选择商品"
            maxlength="10"

          />
        </el-form-item>
        <el-form-item label="系列图片" prop="seriesImg">
          <img-upload v-model="dataForm.seriesImg"/>
          <div class="">建议图片尺寸为1005*504</div>
        </el-form-item>
        <!-- 列表相关区域 -->
        <el-table
          border
          fit
          highlight-current-row
          :data="valuelist"
          style="width: 100%;overflow: hidden; max-height: 700px; overflow-y:scroll;"
        >
          <el-table-column label="商品序号：" prop="prodName" align="center">
            <template slot-scope="{row}">
              <span>{{ row.index }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品名称：" prop="prodName" align="center">
            <template slot-scope="{row}">
              <span>{{ row.productName }}</span>
            </template>
          </el-table-column>

          <el-table-column label="商品id：" prop="platformRate" align="center">
            <template slot-scope="{row}">
              <!-- <span v-if="ids==undefined">{{ row.id }}</span>
                <span v-else>{{ row.productId }}</span> -->
              <span>{{ row.productId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="platformRate" align="center">
            <template slot-scope="{row}">

              <span @click="Ondelete(row.productId,row.index)"
                    style="color:#1890FF;font-size: 12px;cursor:pointer">删除</span>


            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dataFormSubmit()" v-if="(ids==undefined)">
          确认
        </el-button>

        <el-button type="primary" @click="modify()" v-else>
          确认
        </el-button>
      </div>
      <prods-select
        v-if="prodsSelectVisible"
        ref="prodsSelect"
        :isSingle="true"
        :prodType="0"
        @refreshSelectProds="selectSeckillProd"
      ></prods-select>

    </el-dialog>

  </div>
</template>

<script>
import ProdsSelect from '@/components/prods-select/index.vue'

export default {
  components: {
    ProdsSelect
  },
  data () {
    return {
      visible: false,
      prodsSelectVisible: false,
      consignStatus: 1,
      dataForm: {
        seriesName: null,
        seriesImg: null,
        productId: [],
      },
      pageQuery: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      categorySelectorVisible: false, // 分类弹窗显隐
      valuelist: [],
      valist: [],
      selectShopCholdren: false,
      rules: {
        seriesName: [{required: true, message: '系列不能为空', trigger: 'blur'}, {
          max: 12,
          message: '系列长度不能超过10位'
        }],
        seriesImg: [{required: true, message: '主图不能为空', trigger: 'blur'}],
      },
      arr: [],
      ids: '',
      infos: ''
    }
  },
  mounted () {

  },

  methods: {

    // 添加指定商品
    selectSeckillProd (prods) {
      if (prods) {
        this.dataForm.productId = prods
      }
    },
    getInfo (e) {
      this.valist.push(e)
      //  this.valuelist=this.valist.flat(Infinity);
      this.valuelist = [...this.valuelist, ...e]
      this.valuelist.forEach((item, index) => {
        item.index = index + 1
      })
    },
    init (id) {

      this.ids = id
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (id != undefined) {
          this.getinfo(id)
        }

      })
    },
    enableOrDisable () {
      // this.dataForm.status = this.consignStatus === 1 ? 2 : 1
    },
    getinfo (id) {
      this.$http({
        url: this.$http.adornUrl('/platform/spuSeries/getInfo'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign({id: id}
          )
        )
      }).then(({data}) => {
        this.dataForm.seriesName = data.spuSeries.seriesName
        this.dataForm.seriesImg = data.spuSeries.seriesImg
        this.valuelist = data.spuSeriesRelationVOList
        this.valuelist.forEach((item, index) => {
          item.index = index + 1
        })
      })
    },
    // 选择商品
    select () {
      this.prodsSelectVisible = true
      this.$nextTick(() => {
        this.$refs.prodsSelect.init(this.dataForm.productId)
      })
    },

    // 关闭dialog时
    closeDialog () {
      this.dataForm = {
        seriesName: null,
        seriesImg: null,
        productId: []
      }
      this.valuelist = []
      this.arr = []
      // this.valist=[]
    },

    // 表单提交
    dataFormSubmit () {
      if (this.valuelist == '') {
        this.$message.error('请选择商品')
        return
      }
      if (this.dataForm.seriesName == '') {
        this.$message.error('系列名称不得为空')
        return
      }
      if (this.dataForm.seriesImg == '') {
        this.$message.error('系列图片不得为空')
        return
      }
      this.valuelist.map(item => {
        this.arr.push(item.id)
      })
      this.dataForm.productId = this.arr.toString()
      this.$http({
        url: this.$http.adornUrl('/platform/spuSeries/insertSpuSeries'),
        method: 'post',
        data: this.$http.adornData(this.dataForm)
      }).then(async ({data}) => {
        this.visible = false
        this.$emit('refreshDataList')
      }).catch(err => {
        if (err.code = 'A00001') {
          this.dataForm.productId = []
          this.arr = []
        }
      })
    },
    //修改提交
    modify () {
      if (this.valuelist == '') {
        this.$message.error('请选择商品')
        return
      }
      if (this.dataForm.seriesName == '') {
        this.$message.error('系列名称不得为空')
        return
      }
      if (this.dataForm.seriesImg == '') {
        this.$message.error('系列图片不得为空')
        return
      }
      this.valuelist.map(item => {
        this.arr.push(item.productId)
      })
      this.dataForm.id = this.ids
      this.dataForm.productId = this.arr.toString()
      this.$http({
        url: this.$http.adornUrl('/platform/spuSeries/insertSpuSeries'),
        method: 'post',
        data: this.$http.adornData(this.dataForm)
      }).then(async ({data}) => {
        this.visible = false
        this.$emit('refreshDataList')
      }).catch(err => {
        if (err.code = 'A00001') {
          this.dataForm.productId = []
          this.arr = []
        }
      })
    },
    // 商品删除
    Ondelete (e, i) {
      if (this.ids == undefined) {
        let data = this.valuelist
        data.splice(i - 1, 1)
        this.valuelist.forEach((item, index) => {
          item.index = index + 1
        })
      } else {
        this.$http({
          url: this.$http.adornUrl(`/platform/spuSeries/deleByproductId`),
          method: 'delete',
          data: this.$http.adornData({
            product:e
          })
        }).then(({ data }) => {
          this.getinfo(this.ids)
        })
      }
    },
    // 分页
    handleSizeChange (val) {
      this.pageQuery.pageSize = val
    },

    handleCurrentChange (val) {
      this.pageQuery.pageNum = val
    }
  }
}
</script>
<style lang="scss" scoped>
.comtainer {
  background-color: red;
}

p {
  margin: 0;
}

.consignProd-add-upd {
  .el-form-item.el-form-item--medium {
    .el-form-item--medium .el-form-item__label {
      text-align: right !important;
    }
  }
}
</style>
